<template>
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="close">
		<view class="popup_con_position">
			<view class="fixedTitle_position">
				<view class="left"></view>
				<view class="middle">选择移动位置</view>
				<view class="right">
					<u-icon
						@click="close"
						class="close"
						name="close"
						color="black"
						size="20"
					></u-icon>
				</view>
			</view>
			<view style="margin-top: 20rpx">
				<view class="positionGrid" v-for="(items, index) in 5">
					<!-- 左边 -->
					<view
						:class="[
							'positionItem',
							positionIndex === index * 10 - i * 2 + 11 && 'active',
							isInActive(index * 10 - i * 2 + 11) && 'inActive'
						]"
						v-for="(i, key) in 5"
						@click="clickPosition(index * 10 - i * 2 + 11)"
					>
						{{ index * 10 - i * 2 + 11 }}
					</view>
					<!-- 右边 -->
					<view
						:class="[
							'positionItem',
							positionIndex === index * 10 + i * 2 && 'active',
							isInActive(index * 10 + i * 2) && 'inActive'
						]"
						v-for="(i, key) in 5"
						@click="clickPosition(index * 10 + i * 2)"
					>
						{{ index * 10 + i * 2 }}
					</view>
				</view>
			</view>
			<footerBtn
				:btnDisable="!positionIndex"
				name="确定移动"
				@clickBtn="confirm"
				bgcColor="rgba(0,0,0,0)"
			></footerBtn>
		</view>
	</u-popup>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watch } from 'vue';
import footerBtn from '@/components/footerBtn/index.vue';
onLoad(() => {});
const show = ref(false);
const props = defineProps({
	position: Number,
	inActiveArr: Array //已经选择的位置
});
const emits = defineEmits(['confirm']);
const positionIndex = ref();

/**
 * 点击位置
 */
const clickPosition = (index) => {
	positionIndex.value = index;
};

/**
 * 点击确定
 */
const confirm = () => {
	emits('confirm', positionIndex.value);
	show.value = false;
};

/**
 * 是否不可选
 */
const isInActive = (index) => {
	if (props.inActiveArr.indexOf(index) !== -1) {
		return true;
	} else {
		return false;
	}
};

const close = () => {
	show.value = false;
};

watch(
	show,
	(newValue) => {
		if (newValue) {
			positionIndex.value = props.position;
		}
	},
	{ immediate: true }
);

defineExpose({
	show
});
</script>

<style lang="scss" scoped>
::v-deep.u-popup__content {
	padding: 0 !important;
}

.popup_con_position {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 234, 195, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
		#ffffff;
	border-radius: 32rpx 32rpx 0 0;
}

.fixedTitle_position {
	width: 100%;
	font-size: 32rpx;
	color: #524630;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left,
	.right {
		width: 100rpx;
		flex-shrink: 0;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.middle {
		flex: 1;
		text-align: center;
	}
}

.positionGrid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	margin-bottom: 32rpx;
	margin-right: -16rpx;
	padding: 0 24rpx;
	box-sizing: border-box;

	.positionItem {
		width: 56rpx;
		height: 88rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #524630;
		font-weight: 400;
		font-size: 32rpx;
		color: #524630;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active {
		background: #524630;
		color: #ffffff;
	}

	.inActive {
		background: #ececec;
		color: #999999;
		border: none;
		pointer-events: none;
	}
}
</style>
